
<template>
<div class="dv3">
  <div class="dv1" >
    <van-row style="width: 100%;">
      <van-col span="5">
        <van-nav-bar style="padding:9px;background-color: cornsilk"
          left-arrow
          @click-left="onClickLeft"
      />
      </van-col>
      <van-col span="2">
        <van-image style="margin-top: 10px"
          round
          width="2.2rem"
          height="2.2rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      /></van-col>
      <van-col span="4" style="margin-top: 7px"><label style="font-size: 8px">张行者</label>
        <h6 style="margin-top: 3px;background-color: darkorange;border-radius: 8px;color: aliceblue;">游记达人</h6></van-col>
      <van-col span="8"></van-col>
      <van-col span="5" class="sp1"><label class="la2" @click="go()">地图</label></van-col>
    </van-row>
  </div>
  <div class="dv2">
    <div  style="margin-right:69%;">
      <label class="la1">浙江北部</label>
    </div>
  </div>
  <div class="dv3" >
    <P class="p1">{{this.article.title}}</P>
    <p class="p2">
     {{article.content}}
    </p>
  </div>
  <div>
 <img style="width: 350px" :src="this.article.imgurl" @click="tz(this.article.imgurl)">
  </div>

  <div >
    <div >
      <van-tabbar v-model="active"
      >
        <van-tabbar-item icon="chat-o" @click="tocomments()">评论</van-tabbar-item>
        <van-tabbar-item :icon="str" :v-model="str1"  @click="dz()">喜欢</van-tabbar-item>
        <van-tabbar-item :icon="str1" :v-model="str2" @click="tocollection()">收藏</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</div>
</template>

<script>
export default {

  name: "ArticleView",
  data() {
    return {



      article: {
        id: "",
        uid: "",
        title: "",
        content: "",
        imgurl: "",
        ctime: "",
        looks: "",
        aid: "",
        lng:"",
        lat:"",
        imgname:"",
        mid:""
      },
      str:"like-o",
      flag :1,
      str1:"star-o",
      flag1:1,
      }
    },
  mounted(){
    this.checkart();
    }, methods: {
    checkart() {
      this.axios.get("/api/article/list.do?id="+ this.$store.state.atid,).then((r) => {
        console.log(r.data.data)
        if (r.data.code == 200) {
          this.article = r.data.data;
        } else {
          this.$toast(r.data.msg);
        }
      })
    },
    onClickLeft(){
      history.back();
    },
    tocomments(){
      this.$router.push({path:"/articleComment",query:{
        id:this.article.id}})
    },
    tocollection(){
      this.axios.get("api/collect/insertCollect.do?aid="+this.article.aid).then(r=>{
        if(r.data.code==200){
          if(this.flag1==1){
            this.str1 = "star";
            this.flag1=0;
            this.$toast("收藏成功")
          }else{
            this.str1="star-o"
            this.flag1=1;
            this.$toast("取消收藏")
          }
        }
      });
    },
    dz(){
      if (this.flag==1) {
        this.str = "like";
        this.flag=0;
      }else {
        this.str="like-o"
        this.flag=1;
      }
    },
    go(){
      this.$router.push({path:"/map",query:{
        lng:this.article.lng,
        lat:this.article.lat,
        }})
      // console.log(this.article[0])
      // for (var i in this.article) {
      //   console.log(i)
      // }
    },
    tz(e){
      this.$router.push(
          {
            path:'/img',
            query:{
              image:e,
              imgName:this.article.imgname
            }
          }
      );
    }
    },

}

</script>

<style scoped>

.la1{
  font-size: 1px;
  background-color: green;
  color: white;
  border-radius: 10px;
  padding: 6px;

}
.la2{
  background-color: darkorange;
  padding: 12px;
  border-radius: 16px;
}
.p1{
  text-align: justify;
  margin-left: 30px;
  margin-right: 30px;
  font-size: 23px;
  background-color: saddlebrown;

}
.p2{
  text-align: justify;
  margin-left: 30px;
  margin-right: 30px;
  color: dimgray;
  background-color: blanchedalmond;
}
.sp1{
  margin-top: 15px;
}
.dv1{
  background-color: cornsilk;
}
.dv2{

}
.dv3{
  background-color: blanchedalmond;
}
</style>